<template>
  <el-dialog
    title="请选择位置信息"
    :visible.sync="uploadVisible"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="closeBox">

    <div class="uploadFiles">
      <el-upload
        class="oss-upload"
        ref="upload"
        action=""
        :multiple="true"
        :on-remove="handleRemove"
        :on-change="handleChange"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
      </el-upload>
    </div>

    <div>
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="submitUpload()">确 定</el-button>
    </div>

  </el-dialog>
</template>
<script>
export default {
  computed: {
  
  },
  props:[],
  data() {
    return {
      uploadVisible: true,
      sigData: null,
      fileList: [],
      files: [],

    };
  },
  created() {
    this.getSig();
  },
  mounted() {

  },
  methods: {
    closeBox() {
      this.uploadVisible = false;
      this.$ge.$emit("upload-file-close-finish", this.files);
    },
    cancel() {
      this.uploadVisible = false;
    },
    getSig() {
      this.$get("/oss/getUploadOssSignature")
        .then((result) => {
          if (result.code == 200 && result.data) {
            this.sigData = result.data;
          }
        })
        .catch((error) => {
          this.sigData = null;
        });
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    handleChange(file, fileList) {
      //类型（jpg, png）和大小(2M 以内)
      // const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png';
      const isLt2M = file.raw.size / 1024 / 1024 < 500;
      // if (!isJPG) {
      //     this.$message.error('上传头像图片只能是 jpg 或者 png 格式!');
      //     return;
      // }
      if (!isLt2M) {
          this.$message.error('单个文件大小不能超过 500MB!');
          return;
      }
      // if(isJPG && isLt2M) {
      //   this.fileList.push(file);
      // }
      this.fileList.push(file);
      return false;
    },
    submitUpload() {
      if(!this.fileList) {
        this.$message.info("文件不能为空");
        return;
      }
      let fileObj = this.fileList;
      let sigData = this.sigData;//提前请求拿到的签名信息
      for (const item in fileObj) {
        if (Object.hasOwnProperty.call(fileObj, item)) {
          const element = fileObj[item];
          let ossData = new FormData()//创建oss数据对象
          ossData.append('name', element.name)
          let keyValue = 'ep/web/' + this.uuid() + "::" + element.name
          ossData.append('key', keyValue)
          ossData.append('policy', sigData.policy)
          ossData.append('OSSAccessKeyId', sigData.accessId)
          ossData.append('success_action_status', 200)
          ossData.append('Signature', sigData.signature)
          ossData.append('file', element.raw)

          this.$postFormData(sigData.ossDomain, ossData)
          .then((result) => {
            // console.log('上传结束 -- ', result)
          })
          .catch((error) => {
          });

          this.files.push(
            {
              name: element.name,
              url: sigData.ossDomain +'/'+ keyValue,
              size: element.size
            }
          )
        }
      }
      this.$message.success("文件上传成功！");
      this.cancel();
    },

  },
};
</script>

<style lang="scss">

</style>
